<template>
  <div class="msg">
   <div v-for="item in $store.getters.getMessages" :key="item.id">
      <main-msg-item :msg="item"></main-msg-item>
    </div>
  </div>
</template>

<script>
import * as ActionsTypes from '@/store/actions-types';
import MainMsgItem from './main.msg.item';

export default {
  name: 'msg',
  data() {
    return {
    };
  },
  created() {
    if (this.$store.getters.getMessages.length === 0) {
      this.$store.dispatch(ActionsTypes.messages);
    }
  },
  components: {
    'main-msg-item': MainMsgItem,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mu-card{
  margin:0.5rem;
  padding-bottom:0.5rem;
  text-align:left;
}

.mu-chip{
  margin-top:0.5rem;
  margin-left:0.1rem;
}
#id_message{
   margin:0.1rem;
}
</style>
